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ABSTRACT 


This paper focuses on the development of 3D web application by designing 
dynamic 3D model with the help of VFX and animation. 3D Modeling can 
create the static exposure of product but VFX and animation adds dynamic 
effects for real time rendering of product. Real time rendering and interactive 
roaming gives a detailed view of the 3D objects created. Firstly, Blender 
software was used to design a raw 3D model of a swiss knife and, VFX and 
animation were applied to add dynamics and interactive features to this 
model. Verge3D online application was used to define functions that HTML can 
perform on different parts of the model designed. Lastly, Google web designer 
was employed to develop an HTML page where we have placed HTML 
embedded 3D model retrieved from Verge3D. In addition to this, different 
buttons were placed and linked in the website to allow user to perform 


different functions defined in Verge3D. 


INTRODUCTION: 

Ever since 3D modeling came into being around 50 years 
back in the late 1960s, the technology has evolved in a 
massive way. The pioneer 3D graphics company, Evans & 
Sutherland, was founded by David Evans and Ivan 
Sutherland in association with University of Utah, U.S. in 
1968l4!. Currently, there are many industries or sectors 
benefiting from this technology, such as_ gaming, 
architecture, healthcare, engineering, entertainment 
industry, commercial advertising, Geographic Information 
System (GIS), academic research, website development etc. 


With the rapid digitalization of business organizations, more 
and more websites are getting developed daily for online 
presence, information exchange, credibility, market 
expansion, consumer insights, advertising, e-commerce, 3D 
tour, architecture, model designing, gaming, management 
systems, cloud storage, e-learning, etc.IBIIDI6I71, Everyday 
slightly more than 547200 new websites are created 
globallyl8l. Now the competition at the development of 
websites/web applications arises mostly in designing 
making the product more easy to use and interactive at the 
same time. 3D modeling is anew rave in the development of 
websites and web applications. 3D elements used in web 
design can make a website more impressive and memorable. 
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The technology can expand the area of visibility in the 
application as well as the number of details we want to 
display to the user. 2D technologies are not capable of 
developing websites/web applications interactive and 
effective enough to meet UX for certain purposes like 
gaming, product display, etc. Advantages of 3D modeling 
over 2D methods include ability to change angle or animate 
images with faster rendering of the changes, automatic 
calculation and rendering photorealistic effects rather than 
mentally visualizing or estimating, and lesser chance of 
human error in misplacing, overdoing, or forgetting to 
include a visual effectl9]. The website/web application 
prepared with the help of 3D modeling along with visual 
effects and animation has more attractive design and more 
understandable facts /details. 


Some of these 3D modeling softwares commonly used today 
are Adobe Maya, Houdini, Cinema 4D, Blender, WebGL, 
Verge3D, etc. 3D modeling along with VFX and animation can 
enhance the UI/UX of websites/web applications far more 
than user expectationsl!°%. The development of a 3D 
website/web application involves broadly two processes. 
The first step of development of 3D model and 
implementation of VFX is done by software applications like 
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Adobe Maya, Blender, etc. The second step involves the model prepared through VFX and 3D modeling is static, 


deployment of 3D model prepared along with VFX and addition of animation can make the model dynamic. 
animation in websites/web applications by the help of Animation helps in the dynamic manipulation of image and 
software tools like WebGL, Verge3D, etc. VFX includes rendering motions. 


shading and texturing of objects with integration of real time 
environment. Therefore, VFX along with 3D modeling is 
helpful in creating multiple visual combinations. As the 


The objective of the present work is to create and design a 
website using visual effects and animation in addition to the 
3D modeling technology. 


METHODOLOGY 

We have employed following software tools for achieving the objective of the present study - BLENDER, VERGE3DE2! and, 
GOOGLE WEB DESIGNERI!3], Blender software application was used for these three purposes - designing 3D model, 
implementing VFX and animating objects. Verge3D is a middleware between Blender 3D model and HTML. It enables users to 
interact with 3D model through html page. We can also define predefined functions which HTML can perform on different 
objects in 3D model. Verge3D integrates 3D model with pre-defined functions into a HTML embedded object, which is usable in 
HTML page. Google web designer is a software tool to design HTML pages. (Fig. 1) 
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Fig. 1 


RESULTS AND DISCUSSIONS 

Blender: 

Firstly the Blender software tool was used for designing a raw 3D model of the Swiss knife with blades and tools (Fig. 2). 
Secondly, we implemented VFX to design following materials for applying on the model - chrome for blades, aluminum for 
frame and brass for pivot. For the body of the swiss knife model we have designed three different materials - wood (Fig. 3), 
carbon black (Fig. 4) and blue metal (Fig. 5), which we can change in the website/web application. We have placed the swiss 
knife at the centre of the ionosphere to provide space for the movement of camera. We have also applied VFX for interactive 
environment (Fig. 6). Lastly, we have animated the opening/unpacking motion of all blades/tools of the swiss knife model at 
once. We have animated the motion by key-framing the positions, rotations and scales of the blades/tools (Fig. 7). 





Fig. 3 
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Fig. 4 Fig. 5 





Fig. 6 Fig. 7 


Verge3D: 

We have defined functions which HTML can perform on different objects in 3D model. We have integrated 3D model along with 
defined functions into a HTML embedded object, which is usable in HTML page. We have coded the camera object for auto- 
rotate around the 3D model, if there is no activity by the user for a certain period of time. We have defined functions for: 

> Play opening/unpacking animation of all Blades/tools at once 

> Play opening/unpacking animation in reverse, i.e. closing/packing animation of all Blades/tools at once 

> Play opening/unpacking animation for individual blade/tool when respective blade/tool is clicked by user 

> For changing material of body of swiss knife 3D model to other predesigned materials. 


We have defined functions to change material of objects “back_cover” and “front_cover”. We have three different materials 
“carbon”, “cover” (default blue) and “wood”. We are also linking these functions to HTML elements “carbon_material” (Fig. 8), 
“blue_material” (Fig. 9) and “wood_material’ (Fig. 10), i.e., these functions will get invoked on event of click for respective 
element. We have set a timer of 2 seconds after initial loading of HTML page. When the timer will get over, it will set the camera 
object on auto-rotate (Fig. 11). We have also seta click listener on all objects which will get invoked if user clicks anywhere on 
the screen. The click listener will set the camera auto-rotate off for an interval of 5 seconds, after that it will set the camera 
auto-rotate on again (Fig. 12). As initially when the HTML page will load, the Swiss Knife Model will be in folded state, 
therefore, we have defined a variable “fold” with initial state true. The fold variable will hold the folding state of the Swiss Knife 
Model (Fig. 13). We have also defined variables for each individual Blade/Tool to hold their respective fold state, as we have 
given a functionality to unfold individual blade/tool by clicking on them. We have set all these variables initially to false (Fig. 
14). 


On event of click for HTML element “unfold_knife_button”, we have set “play animation” function for all objects (i.e., all 
blades /tools) from frame 0 to 50. We are also checking the fold state of all blades/tools via “fold” variable before playing the 
animation. We are also setting “fold” variable to false after playing animation as all the blades/tools are unfolded now. We have 
also set clicked listener for very individual blade/tool, which will play the animation for that individual blade/tool only. Clicked 
listener will also check and maintain values of “fold” variable as well as respective fold state variable of individual blade/tool. 
On event of click for HTML element “fold_knife_button”, we have set “play animation” function either for all objects (i-e., all 
blades /tools) or for individual blade/tool (if any is in unfold sate) from frame 0 to 50 in reverse order. We are also checking the 
fold state of all blades/tools via “fold” variable as well as respective fold state variable of individual blade/tool (if any is in 
unfold state), before playing the animation. We are also maintaining the values of variables accordingly. (Fig. 15) 
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Google web designer: 

We have a single HTML page where we have placed HTML 
embedded object that we have got from Verge3D. We have 
also placed and linked different buttons via which single user 
can perform different functions that we have already defined 
in Verge3D. We have placed the HTML embedded element 
we have got from Verge3D occupying complete screen. We 
have defined two <div> on both sides (left and right) of the 
screen containing three buttons each. Below is the code of 
the HTML page which we have designed in Google web 
designer. 


CONCLUSION 

The present work involves creation of 3D website/web 
application by the development of dynamic 3D modeling, 
VFX and animation. The efficiency and scalability of the 
project prepared is to provide more interactive and dynamic 
visual experience. The product prepared through 3D 
modeling along with VFX and animation gives an informative 
view for better understanding the procedure. 3D Modeling 
can create the static exposure of product but VFX and 
animation adds dynamic effects for real time rendering of 
product. Real time rendering and interactive roaming gives a 
detailed view of the 3D objects created. Visual interaction of 
the product developed highlights the key features of each 
element present in it and also helps to understand the 360° 
understanding of the environmental elements. VFX adds an 
extra-ordinary feature of texturing and shading along with 
motion of objects via animation, the model prepared via 3D 
modeling along with VFX and animation is far better than the 
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model prepared using 3D modeling alone. The online ic) 

softwares employed for the product development were 

Blender, Verge3D and Google web designer. 
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